// 视频播放模态框
const videoModal = document.querySelector('.video-modal');
const closeVideoModal = document.querySelector('.video-modal .close-modal');
const videoPlayer = document.getElementById('video-player');
const videoTitle = document.getElementById('video-title');
const videoLinks = document.querySelectorAll('.play-overlay');

// 筛选和排序
const filterTabs = document.querySelectorAll('.filter-tab');
const sortSelect = document.getElementById('sort-select');
const cgGroups = document.querySelectorAll('.cg-group');
const cgItems = document.querySelectorAll('.cg-item');

// 打开视频播放模态框
function openVideoModal(title, src) {
  videoTitle.textContent = title;
  videoPlayer.src = src;
  videoModal.style.display = 'flex';
  document.body.style.overflow = 'hidden';
  videoPlayer.play();
}

// 关闭视频播放模态框
function closeVideo() {
  videoModal.style.display = 'none';
  document.body.style.overflow = 'auto';
  videoPlayer.pause();
  videoPlayer.src = '';
}

// 筛选CG动画
function filterCGs(filter) {
  // 移除所有活跃标签样式
  filterTabs.forEach(tab => tab.classList.remove('active'));
  
  // 添加当前标签样式
  const activeTab = document.querySelector(`.filter-tab[data-filter="${filter}"]`);
  activeTab.classList.add('active');
  
  // 筛选CG组
  cgGroups.forEach(group => {
    if (filter === 'all' || group.dataset.game === filter) {
      group.style.display = 'block';
    } else {
      group.style.display = 'none';
    }
  });
}

// 排序CG动画
function sortCGs(sortType) {
  cgGroups.forEach(group => {
    const items = Array.from(group.querySelectorAll('.cg-item'));
    
    // 根据排序类型排序
    items.sort((a, b) => {
      const aId = parseInt(a.dataset.id);
      const bId = parseInt(b.dataset.id);
      
      if (sortType === 'newest') {
        return bId - aId; // 最新发布
      } else if (sortType === 'popular') {
        // 这里应该根据实际数据排序，现在使用ID作为示例
        return bId - aId;
      } else if (sortType === 'duration') {
        // 这里应该根据实际时长排序，现在使用ID作为示例
        return aId - bId;
      }
      
      return 0;
    });
    
    // 清空容器
    const container = group.querySelector('.group-content');
    container.innerHTML = '';
    
    // 添加排序后的项目
    items.forEach(item => {
      container.appendChild(item);
    });
  });
}

// 视频播放事件
videoLinks.forEach(link => {
  link.addEventListener('click', function() {
    const title = this.closest('.featured-item, .cg-item, .ranking-item').querySelector('h3, h4').textContent;
    const videoId = this.closest('.featured-item, .cg-item, .ranking-item').dataset.videoId || 
                   this.closest('.featured-item, .cg-item, .ranking-item').querySelector('.cg-item, .ranking-item').dataset.id;
    // 这里应该使用实际的视频路径
    const videoSrc = `videos/${videoId}.mp4`;
    openVideoModal(title, videoSrc);
  });
});

closeVideoModal.addEventListener('click', closeVideo);

// 筛选事件
filterTabs.forEach(tab => {
  tab.addEventListener('click', function() {
    const filter = this.dataset.filter;
    filterCGs(filter);
  });
});

// 排序事件
sortSelect.addEventListener('change', function() {
  const sortType = this.value;
  sortCGs(sortType);
});

// 初始化页面
document.addEventListener('DOMContentLoaded', function() {
  // 初始化时加载动画效果
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible');
      }
    });
  }, { threshold: 0.1 });
  
  document.querySelectorAll('.cg-group').forEach(group => {
    observer.observe(group);
  });
});